<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import axios from "axios";
import { useRouter } from 'vue-router';

interface Item {
  id: number;
  name: string;
  img: string;
  state: number;
  type?: string;
}

const router = useRouter();
const searchKey = ref("");
const data = ref<Item[]>([]);
const currentType = ref("跑步");

const filteredData = computed(() =>
  data.value.filter(item =>
    item.type === currentType.value &&
    (!searchKey.value.trim() || item.name.includes(searchKey.value.trim()))
  )
);

const getData = async () => {
  let url = "http://localhost:3000/api/video-list";
  await axios.get(url).then((res) => {
    data.value = res.data.map((item: any) => ({
      ...item,
      state: item.state ?? 0
    }));
  });
};

const toggleLike = async (item: Item) => {
  const nextState = item.state === 1 ? 0 : 1;
  try {
    const res = await axios.patch(`http://localhost:3000/api/video-list/${item.id}`, {
      state: nextState
    });
    item.state = res.data.state;
  } catch (e) {
    console.error('操作失败', e);
  }
};

const goToDetail = (item: Item) => {
  router.push({
    name: 'LLQxq',
    params: { id: item.id }
  });
};

const goToSearchPage = () => {
  router.push({ name: 'LLQss' });
};

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="video">
    <div class="search-bar">
      <el-input
        v-model="searchKey"
        @focus="goToSearchPage"
        @keyup.enter="goToSearchPage"
        placeholder="请输入内容"
        clearable
      />
      <el-button type="primary" @click="goToSearchPage">搜索</el-button>
    </div>
    <div>
      <h4>视频分享专区</h4>
      <van-tabs v-model="currentType">
        <van-tab title="跑步" name="跑步"></van-tab>
        <van-tab title="骑行" name="骑行"></van-tab>
        <van-tab title="瑜伽" name="瑜伽"></van-tab>
        <van-tab title="健身" name="健身"></van-tab>
      </van-tabs>
      <pre>currentType: {{ currentType }} | filteredData: {{ filteredData }}</pre>
      <div style="display: flex;width: 100%;flex-wrap: wrap;">
        <el-card
          v-for="item in filteredData"
          :key="item.id"
          class="video-card"
          style="width: 47%;"
        >
          <img 
            :src="item.img" 
            alt=""  
            style="width: 100%;height: 150px;cursor: pointer;" 
            @click="goToDetail(item)"
          />
          <div style="padding-left: 6px;padding-right: 6px;font-size: 13px;">{{ item.name }}</div>
          <p>
            <van-icon
              name="good-job-o"
              class="like-icon"
              :style="{ color: item.state === 1 ? '#e6a23c' : '#ccc' }"
              @click="toggleLike(item)"
              style="float: right;position: relative; top: 40px;right: 10px;"
            />
          </p>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
.video {
  padding: 20px;
}

.video-card {
  width: 50%;
  height: 240px;
  margin: 5px;
  box-sizing: border-box;
  padding: 0;
}

::v-deep(.el-card__body) {
  padding: 0;
}

img {
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  display: block;
  margin-bottom: 0;
}

.like-icon {
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.1s, color 0.2s;
}
.like-icon:active {
  transform: scale(1.2);
}
.like-count {
  margin-left: 6px;
  font-size: 16px;
  color: #e6a23c;
}

@media (max-width: 700px) {
  .video-card {
    width: 100%;
  }
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.el-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  font-size: 14px;
}
:deep(.el-input__inner) {
  height: 32px;
  font-size: 14px;
  border-radius: 12px 0 0 12px;
}
.el-button {
  height: 32px;
  font-size: 14px;
  border-radius: 0 12px 12px 0;
  padding: 0 16px;
}
</style>